<template>
	<!-- 卡牌 -->

		<view class="kapai" >
			<view class="tou flex"  v-if="item.profile!==undefined">
				<image  :src="'https://ss.lanqb.com/'+item.profile.avatar" mode=""></image>
							
				<text>{{item.profile.nickname}}</text>
				
				
			</view>
			<view class="tou flex" v-else>
		<image  :src="'https://ss.lanqb.com/'+item.user_profile.avatar" mode=""></image>
					
		<text>{{item.user_profile.nickname}}</text>
				
			</view>
			<view class="wenzi txt">
			
			{{item.title}}
			</view>
			
				<view class="imgs">
				<slot name="imgs">
				<image :style="{height:gao+'rpx'}"  :src="'https://ss.lanqb.com/'+item.posters.banner" mode=""></image></slot>
				<text class="xiaowen">第{{item.periods}}期</text>
				
			</view>
				
			
			
			<view class="text flex">
				<view class="text-left">
					<text>时间: {{item.begin_at}}</text>
					
				</view>
				<view class="text-right">
					<text>{{item.statistic.purchases}}人感兴趣</text>
					
				</view>
			</view>
		</view>

	
</template>

<script>
	export default{
		props:['item','gao']
	}
</script>

<style lang="scss" scoped>

	.kapai{
		width: 100%;
		height: 100%;
		
		.tou{
			justify-content: left;
			width: 100%;
			height: 34rpx;
			box-sizing: border-box;
			image{
				width: 34rpx;
				height: 34rpx;
				overflow: hidden;
				border-radius: 100%;
				margin-right: 10rpx;
			
			}
			text{
				font-size: 24rpx;
				color: #999;
		
			}
		}
		.wenzi{
			font-size: 30rpx;
			font-weight: 700;
			    color: #222;

				margin: 14rpx 0; 
			
		}
		.imgs{
			width: 100%;

			border-radius: 12rpx;
			overflow: hidden;
			position: relative;
		
			image{
				width: 100%;
				height:224rpx;
				border: 1px solid #000;
			
				
			}
			.xiaowen{
				position: absolute;
				font-size: 20rpx;
				font-weight: 400;
				
				color: #fff;
				top: 15rpx;
				right: 20rpx;
				padding: 7rpx;
				border-radius: 7rpx;
				    background-color: rgba(0,0,0,.4);
			}
		}
		.text{
			flex-wrap: wrap;
			font-size: 20rpx;
			color: #a4a4a4;
			margin: 10rpx 0;
		}
	}
</style>